<template>
<div>
  <a-list :item-layout="setting.options.needPicture?'vertical':'horizontal'" :data-source="setting.options.listSetting">
    <template #renderItem="{ item }">
      <a-list-item>
          <template #extra>
          <img
            width="272"
            alt="logo"
            :src="item.pictureSrc?item.pictureSrc:'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png'"
            v-show="setting.options.needPicture?true:false"
          />
        </template>
        <a-list-item-meta
          :description="item.description"
        >
          <template #title>
            <a href="https://www.antdv.com/">{{ item.title }}</a>
          </template>
          <template #avatar>
            <a-avatar :src="item.headSrc?item.headSrc:'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'" v-show="item.needHead?true:false"/>
          </template>
        </a-list-item-meta>
        {{item.content}}
      </a-list-item>
    </template>
  </a-list>
</div>
  
</template>
<script>
import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';
import { defineComponent,toRef } from 'vue';

export default defineComponent({
  components: {
    StarOutlined,
    LikeOutlined,
    MessageOutlined,
  },
  props:['setting'],
  created(){console.log('setting',this.setting)},
  setup() {
    const pagination = {
      onChange: page => {
        console.log(page);
      },
      pageSize: 3,
    };
    const actions = [
      {
        type: 'StarOutlined',
        text: '156',
      },
      {
        type: 'LikeOutlined',
        text: '156',
      },
      {
        type: 'MessageOutlined',
        text: '2',
      },
    ];
    return {
      pagination,
      actions,
      
    };
  },
});
</script>